<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
</head>
<body>
    <style>
        html body{
            width: 100%;
            height: 100%;
        }
        body{
         background-color: rgba(51, 51, 51, 0.4);
         background-image: url(./2.jpg);
         background-repeat:repeat-x;
        }
       *{
            /*去除浏览器默认样式*/
           margin: 0;
            padding: 0;
            box-sizing: border-box;

        }
        .conter{
            margin:  0 20px;
        }
        h3{
            text-align:center ;/*居中*/
            padding: 20px 0;
            font-size: 20px;
        }
        p{
            text-align: center;
            color: rgb(56, 51, 51);
            font-size: 15px;
            padding: 20px 0;
        }
        .row{
            width: 400px;
            height: 50px;
            margin: 0 auto;
            /* 弹性变量*/
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .row span{
           width: 60px;
           font-size: 15px;/*设置字体大小*/
        }
        .row input{
            width: 300px;
            height: 40px;
            line-height: 30px;
            font-size: 20px;
            text-indent: 40px;
            outline: none;/*去掉边框的轮廓线*/
        }
        .row #submit{
            width: 400px;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            margin: 0 auto;/*水平居中*/
            color: #000;
            background-color: orange;
            border: none;/*去掉边框*/
            border-radius: 10px;/* 圆角边框*/
        }
        .row #submit:active{
            background-color: gray;/*提交后的背景颜色*/
        }
    </style>
    <div class="conter">
      <h3>留言板</h3>
        <p>输入后点击提交，会将信息显示在表格中</p>
    <div class="row">
      <span>谁：</span>
      <input type="text">
    </div>
    <div class="row">
    <span>对谁：</span>
    <input type="text">
    </div>
    <div class="row">
       <span>说什么：</span>
       <input type="text">
    </div>
    <div class="row">
         <button id="submit">提交</button>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
    //页面加载的时候，从服务器获取消息列表，并显示到页面上
    //从数据库中拿到信息，并展示到页面中
    function GetMessages(){
        $.ajax({
            type:"get",
            url:"message",
            success:function(body){
               //依次获取数组中的每个元素
               let container=document.querySelector('.conter');
                for(let message of body){
                    let div=document.createElement('div');
                    div.innerHTML=message.from+'对'+message.to+'说'+message.message;
                    div.className='row';
                    container.appendChild(div)/*挂到DOM树上*/
                }
            }
        })
    }
    //函数调用
    GetMessages();

    let submit=document.querySelector('#submit');
    submit.onclick=function(){
        let inputs=document.querySelectorAll('input');
        let from=inputs[0].value;
        let to=inputs[1].value;
        let msg=inputs[2].value;
        if(from==''||to==''||msg==''){
            return;
        }
        //2.生成一个新的div 内容就是div里面的内容 把这个新的div加到页面中
        let div=document.createElement('div');
        div.innerHTML=from+'对'+to+'说'+msg;
        div.className='row';
        let container=document.querySelector('.conter');
        container.appendChild(div)/*挂到DOM树上*/
        //清空输入框
        for(let i=0;i<inputs.length;i++){
            inputs[i].value='';
        }
        let body = {
               from:from,
               to:to,
               message:msg            
        };
        //生产post请求
        $.ajax({
            type:"post",
            url:"message",
            contentType:"application/json;charset=utf8",
            data:JSON.stringify(body),
            success: function(body){
                alert("留言成功");
            },
            error: function(){
                 alert("留言失败，请重新留言");
            }
        });
    }
</script>
</body>
</html>